<link rel="stylesheet" href="../src/css/pages/rulescriptResult.css">
<div class="fmp-container">
    <div class="ndp-tab-wrapper" name="plain-tab"></div>
    <div class="container-fluid">
        <div class="sear-area" style="height:40px;">
            <div class="row">
                <div class="form-group col-sm-3 relative no-margin">
                    <div class="select2-container" style="width: 100%;">
                        <a id="productSel" href="javascript:void(0)" class="select2-choice app-select2" tabindex="-1">
                            <span id="result" class="select2-chosen">{{i18n-allAppPlatform}}</span>
                            <abbr class="select2-search-choice-close"></abbr>
                            <span class="select2-arrow"><b></b>
                        </span>
                        </a>
                        <input type="hidden" name="fbConnectionObjectId" id="fbConnectionObjectId" />
                        <input type="hidden" name="config" id="productSelResult" />
                        <input type="hidden" name="platform" id="platformDiv" />
                        <div id="tree" class="tree-ratus hide">
                        </div>
                    </div>
                </div>
                <!-- 账号 -->
                <div class="form-group col-sm-1 ">
                    <div id="moreCtn" class="btn-area dropdown">
                        <!--fa fa-plus-->
                        <button id="accountBtn" type="button" data-toggle="dropdown" data-target="#" class="btn btn-default">{{i18n-selectAccount}} <i class="fa fa-chevron-down"></i></button>
                        <ul id="accountMenu" class="dropdown-menu multi-level account-menu" role="menu" style="overflow: auto;max-height: 350px;"></ul>
                    </div>
                </div>
                <!-- 排序因子最小值 -->
                <div class="form-group col-sm-2 ">
                    <input type="text" class="form-control" id="sortMix" placeholder="{{i18n-sortMin}}">
                </div>
                <!-- 排序因子最大值 -->
                <div class="form-group col-sm-2 ">
                    <input type="text" class="form-control" id="sortMax" placeholder="{{i18n-sortMax}}">
                </div>
                <div class="form-group col-sm-1">
                    <select name="adgroup-status" class="form-control" style="width:100px;">
                        <option value="false">{{i18n-toBeOptimized}}</option>
                        <option value="true">{{i18n-watching}}</option>
                    </select>
                </div>
                <div class="form-group col-sm-1">
                    <a href="javascript:void(0)" class="btn btn-primary" id="search-action">
                    {{i18n-search}}
                </a>
                </div>
                <div class="form-group col-sm-1">
                    <a href="javascript:void(0)" class="btn btn-default" id="clean-all-acation">
                    {{i18n-clear}}
                </a>
                </div>
            </div>
        </div>
        <div class="content-area">
            <!-- 分页信息 -->
            <div class="page-info hide">
                <div class="pull-right">
                    <!--工具栏：开始-->
                    <div class="dataTables_paginate paging_simple_numbers">
                        <ul class="pagination pagination-sm">
                        </ul>
                    </div>
                    <!--工具栏：结束-->
                </div>
            </div>
            <!-- Tab页 -->
            <ul id="group-tabs" class="nav nav-tabs bordered hide"></ul>
            <!-- Tab页内容 -->
            <div id="group-tab-contents" class="tab-content"></div>
        </div>
    </div>
    <!-- group-tabs 的 li -->
    <script type="x-template" id="t-group-tabs-li">
        <%_.each(groups, function(group,idx){%>
            <li>
                <a href="#ruleresult-idx" data-toggle="tab" data-group-id="<%=group%>" data-idx="<%=idx%>">
                    <%=group%>
                </a>
            </li>
            <%})%>
    </script>
    <!-- group-tab-content 内容 -->
    <script type="x-template" id="t-group-tab-content">
        <div class="tab-pane fade in active" id="ruleresult-<%=adsetId%>">
            <div class="row">
                <div class="col-md-12">
                    <strong><%=campaignName%></strong> &nbsp;&nbsp; {{i18n-resultsSum}}:
                    <strong><%=resultsSum%></strong>&nbsp;&nbsp; {{i18n-costSum}}:
                    <strong><%=costSum%></strong>&nbsp;&nbsp; LeftTime CPI:<strong><%=LeftTimeCPI%></strong>&nbsp;&nbsp; {{i18n-suggestBid}}：
                    <span id="offerbid"><i class="glyphicon glyphicon-refresh get-loading">$</i></span> &nbsp;&nbsp; AdSet:
                    <strong><a href="https://business.facebook.com/ads/manager/adset/?act=<%=fbAccountId%>&ids=<%=adsetId%>" target="_blank"><%=adsetId%></a></strong>&nbsp;&nbsp; {{i18n-fbAccountId}}:
                    <strong><%=fbAccountId%></strong>
                </div>
            </div>
            <!-- adset table -->
            <div class="adset-area">
            </div>
            <!-- /adset table -->
            <!-- ad table -->
            <div class="ad-block-area">
            </div>
            <!-- /ad table -->
            <!-- 统计时间区域 -->
            <div class="row time-area">
            </div>
            <!-- 提交按钮 -->
            <div class="row text-center">
                <button class="btn btn-success btn-optimize">{{i18n-doOptimize}}</button>
            </div>
        </div>
    </script>
    <!-- Adset -->
    <script type="x-template" id="adset-table">
        <table class="table nowrap-ellipsis table-striped table-hover">
            <thead>
                <tr>
                    <th>AdSet</th>
                    <th>{{i18n-status}}</th>
                    <!-- 动态表头 -->
                    <% _.each(ths, function(_th){%>
                        <th>
                            <%=_th%>
                        </th>
                        <% })%>
                            <th>
                                <% if(budgetType && budgetType === 'day'){ %>
                                    {{i18n-dailyBudget}}
                                    <% }else {%>
                                        {{i18n-lifetimeBudget}}
                                        <% } %>
                            </th>
                            <th>
                                {{i18n-bidAmount}}
                            </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- 名称 -->
                    <td>
                        <span title="<%=name%>"><%=name%></span>
                    </td>
                    <!-- 状态 -->
                    <td>
                        <% if ((status==='ACTIVE') || (status==='PAUSED')) { %>
                            <label class="toggle no-chart">
                                <input type="checkbox" data-adset-id="<%=adsetId%>" data-adset-name="<%=name%>" <%=((status==='ACTIVE' )? 'checked': '')%> name="checkbox-toggle" class="adset-status no-chart" data-original-value="
                                <%=status%>" data-original-mapping-value="
                                    <%=(status==='ACTIVE'?'ACTIVE':'PAUSED')%>" />
                                        <i data-swchon-text="ON" data-swchoff-text="OFF"></i>
                            </label>
                            <% } else { %>
                                <span title="<%=v.status%>"><%=status%></span>
                                <% } %>
                    </td>
                    <!-- 动态统计列-->
                    <% _.each(contents,function(content){ %>
                        <td>
                            <% if(content.length > 1){ %>
                                <span class="text-success" title="<%=( (content[0]==''||content[0]=='null')?'0':content[0] )%>"><%=( (content[0]==''||content[0]=='null')?'0':content[0] )%></span> /
                                <span class="text-danger" title="<%=( (content[1]==''||content[1]=='null')?'0':content[1] )%>"><%=( (content[1]==''||content[1]=='null')?'0':content[1] )%></span>
                                <% } else if (content.length == 1) { %>
                                    <span title="<%=content[0]%>"><%=content[0]%></span>
                                    <% } else {%>
                                        <span>-</span>
                                        <% } %>
                        </td>
                        <%})%>
                            <!--预算-->
                            <td>
                                <div>
                                    <span class="origin-show">
                            $<%=budget%>
                        </span>
                                    <a href="javascript:void(0)" class="td-a-budget edit"><i class="fa fa-edit no-chart"></i></a>
                                </div>
                                <div class="input-group no-chart hide">
                                    <input type="text" class="form-control input-budget edit-input" value="<%=budget%>" data-bid-key="" data-bid-type="<%=budgetType%>" data-original-value="<%=budget%>" name="modify-value">
                                </div>
                            </td>
                            <!--出价-->
                            <td style="white-space: initial">
                                <% if (bidObject.valid){ %>
                                    <div>
                                        <span class="bid-key">
                                    <span title="<%=bidType%>"><%=bidType%></span>
                                        </span>
                                        <span class="bid-value origin-show">
                                    $<%=bidObject.showBidValue%>
                                </span>
                                        <a href="javascript:void(0)" class="td-a-bid edit"><i class="fa fa-edit no-chart"></i></a>
                                    </div>
                                    <div class="input-group no-chart hide">
                                        <input type="text" class="form-control input-bid edit-input" value="<%=bidObject.showBidValue%>" data-bid-key="<%=bidObject.bidKey%>" data-bid-type="<%=bidType%>" data-original-value="<%=bidObject.showBidValue%>" name="modify-bid-value">
                                    </div>
                                    <% } else { %>
                                        -
                                        <% } %>
                            </td>
                </tr>
            </tbody>
        </table>
    </script>
    <script type="x-template" id="ad-block-table">
        <table class="table nowrap-ellipsis table-striped table-bordered table-hover smart-form table-chckbox-con <%=tableTrBaseline%>">
            <thead class="toggle-thead">
                <tr>
                    <th>Ad (
                        <%=group%>) </th>
                    <th>{{i18n-status}}</th>
                    <!-- 动态表头 -->
                    <% _.each(ths,function(_th){ %>
                        <th>
                            <%=_th%>
                        </th>
                        <%})%>
                </tr>
            </thead>
            <tbody <%=fold==t rue ? 'style="display:none;"' : ''%>>
                <% _.each(adGroupResults,function(adGroup){ %>
                    <tr>
                        <td>
                            <span title="<%=adGroup.name%>"><%=adGroup.name%></span>
                        </td>
                        <td>
                            <% if ((adGroup.status==='ACTIVE') || (adGroup.status==='PAUSED')) { %>
                                <label class="toggle no-chart">
                                    <input type="checkbox" data-adgroup-id="<%=adGroup.id%>" data-adgroup-name="<%=adGroup.name%>" <%=((adGroup.status==='ACTIVE' )? 'checked': '')%> name="checkbox-toggle" class="ad-group-status no-chart" data-original-value="
                                    <%=adGroup.status%>" data-original-mapping-value="
                                        <%=(adGroup.status==='ACTIVE'?'ACTIVE':'PAUSED')%>" />
                                            <i class="" data-swchon-text="ON" data-swchoff-text="OFF"></i>
                                </label>
                                <% } else{ %>
                                    <span title="<%=adGroup.status%>"><%=adGroup.status%></span>
                                    <% } %>
                        </td>
                        <% _.each(adGroup.contents,function(content){ %>
                            <td>
                                <% if(content.length > 1){ %>
                                    <span class="text-success" title="<%=( (content[0]==''||content[0]=='null')?'0':content[0] )%>"><%=( (content[0]==''||content[0]=='null')?'0':content[0] )%></span> /
                                    <span class="text-danger" title="<%=( (content[1]==''||content[1]=='null')?'0':content[1] )%>"><%=( (content[1]==''||content[1]=='null')?'0':content[1] )%></span>
                                    <% } else if (content.length == 1) { %>
                                        <span title="<%=content[0]%>"><%=content[0]%></span>
                                        <% } else {%>
                                            <span>-</span>
                                            <% } %>
                            </td>
                            <%})%>
                    </tr>
                    <%})%>
        </table>
    </script>
    <!-- 统计时间区域模板 -->
    <script type="x-template" id="time-area">
        <% if (isWatch===0) {//不观察 %>
            <div class="col-md-12">
                <p>
                    <%=alarmTime%> ----
                        <%=watchTime%> {{i18n-statsData}}
                </p>
            </div>
            <% }else if(isWatch===1){//按时间观察 %>
                <div class="col-md-4">
                    <p>
                        <span class="text-success">
                    <%=alarmTime%>    ----
                    <%=watchTime%>    {{i18n-statsData}}
                </span>
                    </p>
                </div>
                <div class="col-md-4">
                    <p>
                        <span class="text-danger">
                    <%=optimizeTime%>   {{i18n-optimize}} ----
                    <%=dataRefreshTime%>    {{i18n-statsData}}
                </span>
                    </p>
                </div>
                <div class="col-md-4">
                    <p>
                        <span class="text-danger">
                    {{i18n-observed}} <%=delayWatchHours%>{{i18n-hour}},{{i18n-surplus}}<%=(watchLength-delayWatchHours)%>{{i18n-hour}}
                </span>
                    </p>
                </div>
                <% }else if(isWatch===2){//按花费观察 %>
                    <div class="col-md-4">
                        <p>
                            <span class="text-success">
                    <%=alarmTime%>    ----
                    <%=watchTime%>    {{i18n-statsData}}
                </span>
                        </p>
                    </div>
                    <div class="col-md-8">
                        <p>
                            <span class="text-danger">
                    {{i18n-spent}} $<%=consumeSpend%>,{{i18n-surplus}} $<%=(watchSpend-consumeSpend)%>
                </span>
                        </p>
                    </div>
                    <% } %>
    </script>
    <!-- 数据变化列表 -->
    <script type="x-template" id="t-modify-data">
        <table class="table table-bordered ">
            <!-- 调整 adset 状态-->
            <% if(status&&(status !== mappingStatus)){ %>
                <tr>
                    <input type="hidden" name="status" value="<%=status%>">
                    <th>
                        <%=((status==='ACTIVE')?'{{i18n-pause}}':'{{i18n-active}}')%> Adset
                            <%=name%>
                    </th>
                    <th class="text-center"><a href="javascript:void(0)"><i class="fa fa-trash-o optimize-del-btn"></i></a></th>
                </tr>
                <% } %>
                    <!-- 调整预算-->
                    <% if(budgetNew*1 !== budgetOld*1){ %>
                        <tr>
                            <input type="hidden" name="budgetNew" value="<%=(budgetNew)%>">
                            <input type="hidden" name="budgetOld" value="<%=(budgetOld)%>">
                            <input type="hidden" name="budgetType" value="<%=budgetType%>">
                            <th>{{i18n-changeBudget}} $
                                <%=budgetOld%> {{i18n-to}} $
                                    <%=budgetNew%>
                            </th>
                            <th class="text-center"><a href="javascript:void(0)"><i class="fa fa-trash-o optimize-del-btn"></i></a></th>
                        </tr>
                        <% } %>
                            <!-- 调整单价-->
                            <% if(vpiOld !== vpiNew){ %>
                                <tr>
                                    <input type="hidden" name="vpiOld" value="<%=(vpiOld)%>">
                                    <input type="hidden" name="vpiNew" value="<%=(vpiNew)%>">
                                    <input type="hidden" name="vpiOldKey" value="<%=vpiOldKey%>">
                                    <th>{{i18n-changeAmount}}
                                        <%=vpiOldKey%> $
                                            <%=vpiOld%> {{i18n-to}}
                                                <%=vpiOldKey%> $
                                                    <%=vpiNew%>
                                    </th>
                                    <th class="text-center"><a href="javascript:void(0)"><i class="fa fa-trash-o optimize-del-btn"></i></a></th>
                                </tr>
                                <% } %>
                                    <!-- 调整 adgroup-->
                                    <% _.each(ads,function(ad,idx){  %>
                                        <tr>
                                            <input type="hidden" name="ads.adGroup" value="<%=ad.adGroupId%>" data-adgroup-status="<%=ad.status%>">
                                            <th>
                                                <%=((ad.status==='ACTIVE')?'{{i18n-active}}':'{{i18n-pause}}')%> Ad
                                                    <%=ad.name%>
                                            </th>
                                            <th class="text-center"><a href="javascript:void(0)"><i class="fa fa-trash-o optimize-del-btn"></i></a></th>
                                        </tr>
                                        <%})%>
        </table>
    </script>
    <!-- 提交优化Modal -->
    <div id="optimize-confirm-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="c-modal-dialog modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{i18n-optConfirm}}</h4>
                </div>
                <div class="modal-body confirm-modal-body ">
                    <input type="hidden" name="id" value="">
                    <input type="hidden" name="adSetId" value="">
                    <input type="hidden" name="ruleId" value="">
                    <input type="hidden" name="fbAccountId" value="">
                    <div class="col-sm-12 optimize-confirm-area" id="t-optimize-dialog-content-table">
                    </div>
                    <div class="col-sm-12">
                        <input type="radio" name="isWatch" value="0"> {{i18n-notObserved}}
                    </div>
                    <div class="col-sm-12">
                        <input type="radio" name="isWatch" value="1"> {{i18n-observes}}
                        <input type="text" name="delayHours" style="width:100px;" value="24"> {{i18n-hour}}
                    </div>
                    <div class="col-sm-12">
                        <input type="radio" name="isWatch" checked="checked" value="2"> {{i18n-observes}}
                        <input type="text" name="delaySpent" style="width:100px;">$
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="confirm-btn">{{i18n-confirmOpt}}</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 清空提示Modal -->
    <div id="clean-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="c-modal-dialog modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{i18n-clearData}}</h4>
                </div>
                <div class="modal-body">
                    {{i18n-clearDataMsg}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="clean-btn">{{i18n-confirm}}</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 翻页修改提示 -->
    <div id="page-modify-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="c-modal-dialog modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{i18n-nextPageMsg}}</h4>
                </div>
                <div class="modal-body confirm-modal-body">
                    <div class="page-modify-area">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default modify-btn">{{i18n-continueEdit}}</button>
                    <button type="button" class="btn btn-default continue-btn" data-dismiss="modal">{{i18n-nexPage}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
